<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>el与data的两种写法</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        data与el的两种写法
        1. el有两种写法
            1. new Vue时配置el属性
            2. 先创建Vue实例,随后在通过`vm.$mount('#root')`指定el的值(官方称为挂载)
        2. data有两种写法
            1. 对象式
            2. 函数式
            3. 如何选择,目前是那种都可以,以后学习到组件时,data必须使用函数式,否则会报错.
        3. 一个重要的原则:
            由Vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再试Vue实例了.
     -->
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>你好,{{name}}</h1>
    </div>

</body>
<script type="text/javascript">
    Vue.config.productionTip = false; //阻止Vue启动时生成生产提示
    //el的两种写法
    /* const v = new Vue({
        // el:'#root', //第一种写法
        data:{
            name:'尚硅谷'
        }
    });
    console.log(v);
    v.$mount('#root'); //第二种写法
    setTimeout(() => {
        v.$mount('#root');
    },1000); */

    //data的两种写法
    const v = new Vue({
        el: '#root',
        //data的第一种写法:对象式
        /* data:{
            name:'尚硅谷'
        } */
        /* data:function(){
            console.log(this); //此处的this是Vue实例对象
            return{
                name:'尚硅谷'
            }
        } */
        /* // 不能使用箭筒函数,因为箭头函数没有this,这里打印this会向外找,就找到了全局this,即windows
        data:()=>{
            console.log(this); //此处的this是Vue实例对象
            return{
                name:'尚硅谷'
            }
        } */
        //可以简写为
        data() {
            console.log(this); //此处的this是Vue实例对象
            return {
                name: '尚硅谷'
            }
        }
    });
        // console.log(v);


</script>

</html>